<template>
  <div>
    <basic-container>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>内容审核</el-breadcrumb-item>
        <el-breadcrumb-item>插画评论(先发后审)</el-breadcrumb-item>
      </el-breadcrumb>
    </basic-container>  
    <basic-container>
      <avue-crud ref="crud" :data="data" v-model="form" :option="option" :page.sync="page" @on-load="getList" @refresh-change="refreshChange" @search-reset="from = {}" @search-change="searchChange" @selection-change="selectionChange">
        <template slot-scope="scope" slot="menuLeft">
          <el-button type="primary" icon="el-icon-edit" size="small" plain @click.stop="editSelect(true)">通过</el-button>
          <el-button type="danger" icon="el-icon-delete" size="small" plain @click.stop="editSelect(false)">拒绝</el-button>
          <br />
          <!-- <el-tag> 已通过n条 未通过n条 待审核n条</el-tag> -->
        </template> 
        <template slot="content" slot-scope="scope">
          <el-form class="content">
            <a href="#" @click="open(scope.row.content)">
              <basic-container v-html="scope.row.content"> </basic-container>
            </a>
          </el-form>
        </template>
        <template slot-scope="scope" slot="menu">
          <!-- <el-button icon="el-icon-edit" type="text" size="small" @click.stop="reply(scope)">{{scope.row.reply_id ? "编辑回复":"回复"}}</el-button> -->
          <el-button icon="el-icon-edit" type="text" size="small" @click.stop="adopt(scope)">通过</el-button>
          <el-button icon="el-icon-delete" type="text" size="small" @click.stop="refuse(scope)">拒绝</el-button>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script> 
import { common } from "@/api/cat/httpRequest";
import { catUrl } from "@/config/env";
import { appInsetComment as baseUrl } from "@/api/cat/baseUrls"; 

export default {
  data () {
    return {
      page: {
        total: 0,
        pageSize: 10,
      },
      type: true,
      data: [],
      params: {},
      form: {},
      // 默认查询条件
      default: {
        'orderByList': 'createtime&DESC'
      },
      // 勾选选中的内容
      checks: [],
      option: {
        delBtn: false,
        editBtn: false,
        searchBtn: true,
        addBtn: false,
        selection: true,
        border: true,
        column: [
          {
            label: "id",
            prop: "id",
            type: "input",
            search: false,
            required: true,
            addDisplay: false,
            editDisplay: false,
            addDisabled: false,
            editDisabled: false,
            hide: true
          },
          {
            label: "评论日期",
            prop: "createtime",
            type: "daterange",
            search: true,
            addDisplay: false,
            editDisplay: false,
            addDisabled: false,
            editDisabled: false,
            hide: false,
          },
          {
            label: "版本号",
            prop: "app_version",
            type: "input",
            search: true,
            addDisplay: false,
            editDisplay: false,
            addDisabled: false,
            editDisabled: false,
          },
          {
            label: "渠道号",
            prop: "channel_id",
            type: "input",
            addDisplay: false,
            editDisplay: false,
            addDisabled: false,
            editDisabled: false,
          },
          {
            label: "用户id",
            prop: "user_id",
            type: "input",
            search: false,
            addDisplay: false,
            editDisplay: false,
            addDisabled: false,
            editDisabled: false,
          },
          {
            label: "插画id",
            prop: "inset_id",
            type: "input",
            search: true,
            addDisplay: false,
            editDisplay: false,
            addDisabled: false,
            editDisabled: false,
          },
          {
            label: "插画标题",
            prop: "inset_title",
            type: "input",
            search: true,
            addDisplay: false,
            editDisplay: false,
            addDisabled: false,
            editDisabled: false,
          },
          {
            label: "标签",
            prop: "label",
            type: "select",
            hide: false,
            search: true,
            placeholder: "标签",
            dicData: [
              {
                label: "评论",
                value: 1,
              },
              {
                label: "回复",
                value: 2,
              },
            ],
            props: {
              label: "label",
              value: "value",
            },
            addDisplay: false,
            editDisplay: false,
            addDisabled: false,
            editDisabled: false,
          },
          {
            label: "评论内容",
            prop: "content",
            type: "input",
            search: true,
            slot:true,
            addDisplay: false,
            editDisplay: false,
            addDisabled: false,
            editDisabled: false,
            width:'120px',
          },  
          {
            label: "审核状态",
            prop: "state",
            type: "select",
            hide: false,
            search: false,
            placeholder: "审核状态",
            dicData: [
              {
                label: "<font style='color:red'>待审核</font>",
                value: 0,
              },
              {
                label: "通过",
                value: 1,
              },

              {
                label: "未通过",
                value: 2,
              },
            ],
            props: {
              label: "label",
              value: "value",
            },
            addDisplay: false,
            editDisplay: false,
            addDisabled: false,
            editDisabled: false,
          },
          {
            label: "审核状态",
            prop: "states",
            type: "select",
            hide: true,
            search: true,
            placeholder: "审核状态",
            dicData: [
              {
                label: "待审核",
                value: 0,
              },
              {
                label: "通过",
                value: 1,
              },

              {
                label: "未通过",
                value: 2,
              },
            ],
            props: {
              label: "label",
              value: "value",
            },
            addDisplay: false,
            editDisplay: false,
            addDisabled: false,
            editDisabled: false,
          },
          {
            label: "最后操作信息",
            prop: "edittime",
            type: "date",
            addDisplay: false,
            editDisplay: false,
            addDisabled: false,
            editDisabled: false,
            readonly: true,
          },
        ],
      },
    };
  },
  methods: {
    /**获取列表 */
    async getList () {
      this.loading = true;
      //清空表格列表
      this.data = [];
      //发送请求获取数据
      let response = await common(
        `${baseUrl.pageAndParam}`,
        { ...this.params, ...this.default },
        this.page,
        "POST"
      );
      
      this.page = response.page;
      this.data = response.data;
      this.loading = false;
    }, 
    /**刷新 */
    refreshChange () {
      this.getList();
      
    }, 
    /**搜索 */
    searchChange (params, done) {
      // params.reply_content = `%${params.reply_content ? params.reply_content : ""}%`
      params.content = `${params.content ? "%"+params.content+"%" : ""}`
      params.createtime = `${params.createtime ? "!<>!" + params.createtime : ""}`
      params.state = params.states;
      delete params.states;
      this.params = params;
      this.page.currentPage = 1;
      this.getList();
      if (done) done();
    },
    /**勾选所有 */
    selectionChange (row) {
      this.checks = row
    },
    //某个不通过
    async refuse (scope) {
      if(scope.row.state==2){
        return this.$message.error("已是该状态,不可重复修改");
      }
      scope.row.state = 2
      scope.row.edittime = new Date();
      let data = await common(`${baseUrl.update}`, scope.row, null, "POST");
      this.getList()
    },
    //某个通过
    async adopt (scope) {
      if(scope.row.state==1){
        return this.$message.error("已是该状态,不可重复修改");
      }
      scope.row.state = 1
      scope.row.edittime = new Date();
      let data = await common(`${baseUrl.update}`, scope.row, null, "POST");
      this.getList()
    },
    /**
     * 全选的通过或拒绝
     * type : 1表示通过,2表示拒绝
     */
    async editSelect (type) {
      let arr = this.checks.filter(item=> item.state==(type ? 1 : 2));
      if(arr.length>0){
        return this.$message.error("选择内容存在该状态,不可修改");
      }
      this.checks.forEach(item => {
        item.state = type ? 1 : 2
        item.edit_time = new Date()
      })
      let data = await common(`${baseUrl.updateAll}`, this.checks, null, "POST");
      this.getList()
    },
    reply (scope) {
      this.$refs.crud.rowEdit(scope.row, scope.index)
    },
    open(content) {
      console.log(content);
      this.$notify({
        title: "评论内容",
        dangerouslyUseHTMLString: true,
        message: `<strong>${content}</strong>`,
      });
    },
  },
};
</script>
<style>
.content .basic-container {
  overflow: auto;
  height: 100px;
}
</style>